<template>
  <div> 
    <h1>管理员日志</h1>
    <el-form @submit.native.prevent="findLogs">
      <el-form-item style="float:left">
        <el-input v-model.lazy="keyWord" style="width:200px" placeholder="搜索管理员"></el-input>
        <el-button type="primary" native-type="submit">搜索</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <el-select v-model="recentTime" placeholder="时间" style="text-algin:right" @change="selectTime(recentTime)">
          <el-option label="全部" value="all"></el-option>
          <el-option label="近一天" value="nearDay"></el-option>
          <el-option label="近一周" value="nearWeek"></el-option>
          <el-option label="较早" value="early"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  <el-table
    :data="logsTimeList"
    style="width: 550px;margin:0 auto">
    <el-table-column
      label="登录时间"
      width="200">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.time }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="账号"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>账号: {{ scope.row.adminsId.account }}</p>
          <p>登陆地址: {{ scope.row.time }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.adminsId.account }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="remove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import moment, { unix } from 'moment';
  export default {
    data(){
      return {
        logs:[],
        recentTime:"",
        keyWord:"",
        nowDay:""
      }
    },
    created(){
      this.findLogs();
    },
    methods:{
      moment,
      async findLogs(){
        let res;
        if(this.keyWord!=""){
          res=await this.$http.post('/logs/searchLogs',{keyWord:this.keyWord});
        }else{
          res=await this.$http.get('/logs/getLogs');
        }
        this.logs=res.data;
      },
      selectTime(time){
        if(time=="nearDay"){
          this.nowDay= moment().format('YYYY-MM-DD HH:mm:ss');
          // console.log(moment(this.nowDay).unix()-moment(temp).unix());86400
        }
      },
      async remove(row){
      this.$confirm(`是否确定要删除此条日志？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res=await this.$http.delete(`/logs/delete/${row._id}`);
          this.findLogs();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
    }
    },
    computed:{
      logsTimeList(){
        return this.logs.filter((elem,index,array)=>{
          if(this.recentTime==""||this.recentTime=="all"){
            return elem;
          }else if(this.recentTime=="nearDay"){
            return moment(this.nowDay).unix()-moment(elem.time).unix()<=86400
          }else if(this.recentTime=="nearWeek"){
            return (moment(this.nowDay).unix()-moment(elem.time).unix()>86400
            &&
            moment(this.nowDay).unix()-moment(elem.time).unix()<=86400*7);
          } else{
             return moment(this.nowDay).unix()-moment(elem.time).unix()>86400*7
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>